import {defineComponent} from "vue";

// import './styles/index.css';
// import '@styles/index.css';
import classes from '@styles/test.module.css';
// import '@styles/test.scss';

import logo from './assets/logo.png';

// 1.url
/*import test from './test?url'
console.log('test:',test); //test: /src/test.ts*/

// 2.raw
/*import test from './test?raw'
console.log('test:',test);*/
/* 拿到的是源文件内容
test: import {A} from './types';

export const a:A = {
  name: 'ahhh',
  age: 123
}

// export {A} //打开会报如下错误： Uncaught SyntaxError: The requested module '/src/types.ts' does not provide an export named 'A'
*/

//3.加载为 Web Worker
// import Worker from './worker?worker';

//4. 在构建时 Web Worker 内联为 base64 字符串
// import Worker from './worker.js?worker&inline';
/*const worker = new Worker();
worker.onmessage = function(e){
  console.log('worker.onmessage ---> e:',e);
}*/

//5. json
// import pkg from '../package.json';
// console.log('pkg:',pkg); //{name: 'vite-test001', version: '0.0.0', scripts: {…}, dependencies: {…}, devDependencies: {…}}
// import {version} from '../package.json';

//6. wasm
/*import init from './fib.wasm';
init().then(m=>{
  console.log(m.fib(10)); //55
})*/

//glob import
//比如说引入多语言的语言包
// const globModules = import.meta.glob('./glob/*');
// const globModules = import.meta.glob('./glob/*.js');
/*const globModules = import.meta.glob('./glob/!*-[0-9].js'); //./glob/test-1.js:test-1
console.log('globModules:',globModules);
/!*
globModules: Object
              ./glob/a.js: () => import("/src/glob/a.js")
              ./glob/a.json: () => import("/src/glob/a.json?import")
              ./glob/b.js: () => import("/src/glob/b.js")
              ./glob/b.json: () => import("/src/glob/b.json?import")
              ./glob/test-1.js: () => import("/src/glob/test-1.js")
              [[Prototype]]: Object
*!/
Object
  .entries(globModules)
  .forEach(([k, v]) => {
    // console.log(`${k}:`);
    v().then(m => console.log(`${k}:` + m.default));
  });*/


/** 集成mdx*/
import HelloMdx from './hello.mdx';
import {MDXProvider} from 'vite-mdx/vue3';

export default defineComponent({
  setup(){
    return () => {
      return <MDXProvider components={{
        h1: (props, {slots}) => <h2 {...props} style={{color: 'red'}}>{slots && slots.default()}</h2>,
        /*↓ 如果你的mdx文件里的vue组件指定了mdxType, 那么你指定的mdxType的值如果在我们传递的components里能找到对应的key的话, 会用这个key对应的组件进行渲染, 而不是你import的那个组件*/
        mdxTypeButton: (props, {slots}) => <button {...props} style={{color: 'pink'}}>{slots && slots.default()}</button>
      }}>
        <div class={`root ${classes.moduleClassA}`}>
          Hello ahhh2~~
          <img src={logo} alt='logo'/>
        </div>
        <div>
          <input type="text"/>
          123
        </div>
        <HelloMdx />

        {/*如果你的mdx文件里引用了vue的组件, 那么你要么在mdx文件里import对应的文件, 要么像↓这样通过components属性把该组件传递进去*/}
        {/*<HelloMdx components={{Button: (props, {slots}) => <button {...props} style={{color: 'orange'}}>{slots && slots.default()}</button>}}/>*/}
      </MDXProvider>
    };
  }
})
